<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">航标灯环境</div>
    </div>
    <div class="XboxTop_con" style="padding: 10px;">
      <div style="width: 100%; height: 100%;overflow-y: auto;scrollbar-width: none;">

        <div v-for="(item, i) in list" :key="i" class="listcen" style="margin-bottom: 10px;">
          <img :src="item.pictureUrl" alt=""  style="width: 40%;"/>
          <div class="listcen_val_con" style="width: 59%;">
            <div class="listcen_val_con_item" style="margin-bottom: 5px;"><span>设备名称：</span><span>{{ item.name }}</span></div>
            <div class="listcen_val_con_item" style="margin-bottom: 5px;"><span>时间：</span><span>{{ item.updateTime }}</span></div>
            <div class="listcen_val_con_item"><span>状态：</span><span :style="{color:item.status==1?'#00FF00':'#FF0000'}">{{ item.status==1?'正常':'异常' }}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //变量
  data() {
    return {
      list: [
        {
          pictureUrl: require("@/assets/hb_img/bj/bsbjw.png"),
          name: "实时数据",
          createTime: "ssss",
          status: 1,
        },
      ],
    };
  },
  //初始
  mounted() {},
  //事件
  methods: {
    init(data){
      this.list=data
    }
  },
  //销毁
  beforeDestroy() {},
};
</script>
<style scoped>
.listcen {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: #fff;
  background: rgba(0, 78, 163, 0.3);
}
.listcen_val_con {
  display: flex;
  flex-direction: column;
}
</style>
